<template>
	<view class="content">
		<view class="info">
			<view class="line">
				<view class="title">店铺名称</view>
				<view class="value">{{orderCreateData.siteName}}</view>
			</view>
			<view class="line">
				<view class="title">消费券余额</view>
				<view class="value">{{orderPaymentData.consumer_coupon}}</view>
			</view>
			<view class="line">
				<view class="title">账户余额（包括可提现与不可提现余额）</view>
				<view class="value">{{orderPaymentData.balance}}</view>
			</view>
		</view>
		<view class="btn" v-if="orderCreateData.siteId == 0" @click="scan">扫码</view>
		<view class="info">
			<view class="line">
				<view class="title">支付金额</view>
				<input class="numInput" type="digit" v-model="orderPaymentData.num" style="padding: 10upx 50upx;border-bottom: 1upx solid #eee;" placeholder="请填写支付金额"/>
				<view>元</view>
			</view>
		</view>
		<view class="btn" @click="openChoosePayment()">确定支付</view>
		
		<!-- 选择支付方式弹窗 -->
		<ns-payment
			ref="choosePaymentPopup"
			:isBalance="orderPaymentData.isUseBalance"
			:isConsumerCoupon="orderPaymentData.isUseConsumer"
			:consumerCouponDeduct="orderPaymentData.num > 0 && orderPaymentData.consumer_coupon > 0 ? consumerCouponDeduct : '0'"
			@useConsumerCoupon="useConsumerCoupon"
			@useBalance="useBalance"
			:successUrl="successUrl"
			:balanceDeduct="orderPaymentData.num > 0 && orderPaymentData.balance > 0 ? balanceDeduct : '0'"
			:payMoney="orderPaymentData.moneyNum"
			@confirm="orderCreate"
		></ns-payment>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	import nsPayment from '@/components/payment/payment.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup,
			nsPayment
		},
		data() {
			return {
				site_id:0,
				successUrl: "/promotionpages/offlinepay/result",
				orderCreateData: {
					siteId: 0,
					siteName: "请商家线下付二维码",
					pay_password: ''
				},
				orderPaymentData: {
					isUseBalance: 0,
					isUseConsumer: 0,
					moneyNum: 0,
					consumer_coupon: 0,
					balance: 0
				},
			}
		},
		onLoad(options) {
			
			
			var sceneParams = decodeURIComponent(options.scene);
			var id;
			
			if (sceneParams) {
				
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('id') != -1) id = item.split('-')[1];
						
					});
				}
			}
			if (options.id && options.id!='undefined') {
				id = options.id;
			}
			this.site_id = id;
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/promotionpages/offlinepay/index?id=' + id);
				return;
			}
			this.getShopInfo()
			this.getMemberInfo()
		},
		onHide() {
			if (this.$refs.loadingCover) this.$refs.loadingCover.show();
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			},
			// 余额抵扣
			balanceDeduct() {
				if (parseFloat(this.orderPaymentData.balance).toFixed(2) <= parseFloat(this.orderPaymentData.num).toFixed(2)) {
					return parseFloat(this.orderPaymentData.balance).toFixed(2);
				} else {
					return parseFloat(this.orderPaymentData.num).toFixed(2);
				}
			},
			// 消费券抵扣
			consumerCouponDeduct() {
				if (parseFloat(this.orderPaymentData.consumer_coupon).toFixed(2) <= parseFloat(this.orderPaymentData.num).toFixed(2)) {
					return parseFloat(this.orderPaymentData.consumer_coupon).toFixed(2);
				} else {
					return parseFloat(this.orderPaymentData.num).toFixed(2);
				}
			}
		},
		watch: {
			storeToken: async function(nVal, oVal) {
				await this.getShopInfo();
				await this.getMemberInfo();
				
			}
		},
		methods: {
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/offlinepay/api/OfflinePay/getMemberInfo',
					success: res => {
						if (res.code >= 0) {
							this.orderPaymentData.consumer_coupon = res.data.consumer_coupon;
							this.orderPaymentData.balance = res.data.balance;
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						} else {
							this.$util.showToast({
								title: res.message
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
							}, 1000);
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			getShopInfo() {
				this.$api.sendRequest({
					url: '/offlinepay/api/OfflinePay/getShop',
					data: {
						id: this.site_id
					},
					success: res => {
						if (res.code >= 0) {
							this.orderCreateData.siteId = res.data.id;
							this.orderCreateData.siteName = res.data.name;
							this.orderPaymentData.consumer_coupon = res.data.consumer_coupon;
							this.orderPaymentData.balance = res.data.balance;
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						} else {
							this.$util.showToast({
								title: res.message
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
							}, 1000);
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			scan() {
				var that = this
				uni.scanCode({
					success: function (res) {
						that.getShopInfo(res.result)
					}
				});
			},
			getOrderPaymentData() {
				var that = this
				that.$api.sendRequest({
					url: '/offlinepay/api/OfflinePay/page',
					data: {
						siteId: that.orderCreateData.siteId,
						isUseBalance: that.orderPaymentData.isUseBalance,
						isUseConsumer: that.orderPaymentData.isUseConsumer,
						moneyNum: that.orderPaymentData.moneyNum,
						consumer_coupon: that.orderPaymentData.consumer_coupon,
						balance: that.orderPaymentData.balance,
						num: that.orderPaymentData.num
					},
					success: res => {
						if (res.code >= 0) {
							that.orderPaymentData.isUseBalance = parseInt(res.data.isUseBalance)
							that.orderPaymentData.isUseConsumer = parseInt(res.data.isUseConsumer)
							that.orderPaymentData.moneyNum = parseFloat(res.data.moneyNum)
							that.$forceUpdate()
							if (that.$refs.loadingCover) that.$refs.loadingCover.hide();
						} else {
							that.$util.showToast({
								title: '未获取到创建订单所需数据！'
							});
							setTimeout(() => {
								that.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
							}, 1000);
						}
					},
					fail: res => {
						if (that.$refs.loadingCover) that.$refs.loadingCover.hide();
					}
				})
			},
			// 使用余额
			useBalance() {
				if (this.orderPaymentData.isUseBalance) this.orderPaymentData.isUseBalance = 0;
				else this.orderPaymentData.isUseBalance = 1;
				this.orderCalculate();
				this.$forceUpdate();
			},
			// 使用消费券
			useConsumerCoupon() {
				if (this.orderPaymentData.isUseConsumer) this.orderPaymentData.isUseConsumer = 0;
				else this.orderPaymentData.isUseConsumer = 1;
				this.orderCalculate();
				this.$forceUpdate();
			},
			orderCalculate() {
				var that = this
				that.$api.sendRequest({
					url: '/offlinepay/api/OfflinePay/page',
					data: {
						siteId: that.orderCreateData.siteId,
						isUseBalance: that.orderPaymentData.isUseBalance,
						isUseConsumer: that.orderPaymentData.isUseConsumer,
						moneyNum: that.orderPaymentData.moneyNum,
						num: that.orderPaymentData.num
					},
					success: res => {
						if (res.code >= 0) {
							that.orderCreateData.siteId = res.data.siteId
							that.orderPaymentData.isUseBalance = parseInt(res.data.isUseBalance)
							that.orderPaymentData.isUseConsumer = parseInt(res.data.isUseConsumer)
							that.orderPaymentData.moneyNum = parseFloat(res.data.moneyNum)
							that.$forceUpdate()
							if (that.$refs.loadingCover) that.$refs.loadingCover.hide();
						} else {
							that.$util.showToast({
								title: '未获取到创建订单所需数据！'
							});
							setTimeout(() => {
								that.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
							}, 1000);
						}
					},
					fail: res => {
						if (that.$refs.loadingCover) that.$refs.loadingCover.hide();
					}
				})
			},
			// 显示选择支付方式弹框
			openChoosePayment() {
				var that = this
				if (that.orderPaymentData.num === undefined && that.orderPaymentData.num <= 0) {
					uni.showToast({
						icon: "none",
						duration: 1000,
						mask: true,
						title: "请输入需要支付的金额"
					})
					return;
				}
				if (that.orderCreateData.siteId == 0) {
					uni.showToast({
						icon: "none",
						duration: 1000,
						mask: true,
						title: "请扫描店家线下付二维码"
					})
					return;
				}
				that.getOrderPaymentData()
				that.$refs.choosePaymentPopup.open()
			},
			orderCreate() {
				var that = this
				this.$api.sendRequest({
					url: '/offlinepay/api/OfflinePay/create',
					data: {
						siteId: that.orderCreateData.siteId,
						isUseBalance: that.orderPaymentData.isUseBalance,
						isUseConsumer: that.orderPaymentData.isUseConsumer,
						moneyNum: that.orderPaymentData.moneyNum,
						num: that.orderPaymentData.num
					},
					success: res => {
						uni.hideLoading();
						if (res.code >= 0) {
							if (this.orderPaymentData.moneyNum == 0) {
								this.$util.redirectTo(that.successUrl, {
									code: res.data
								}, 'redirectTo');
							} else {
								this.$refs.choosePaymentPopup.getPayInfo(res.data);
							}
						} else {
							if (res.data.error_code == 10 || res.data.error_code == 12) {
								uni.showModal({
									title: '订单未创建',
									content: res.message,
									confirmText: '去设置',
									success: res => {
										if (res.confirm) {
											this.selectAddress();
										}
									}
								})
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
						}
					},
					fail: res => {
						uni.hideLoading();
						this.isSub = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30upx;
		.info {
			.line {
				margin: 30upx 0;
				padding: 20upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: #FFFFFF;
				.title {
					font-weight: 600;
				}
				
				.numInput {
					text-align: right;
					border-bottom: 1upx soild #eee;
					padding: 1upx;
				}
				input {
					padding: 20upx 30upx;
				}
			}
		}
		.btn {
			margin: 20upx auto;
			background-color: #ff4544;
			font-size: 32upx;
			color: #FFF;
			text-align: center;
			font-weight: 600;
			padding: 20upx 100upx;
			border-radius: 200upx;
		}
	}
</style>